<script setup>
import {ref, onMounted} from 'vue'
import axios from 'axios'

//使用代理
//axios.defaults.baseURL = 'http://localhost/api'
axios.defaults.baseURL = '/api'

//直接写地址，就不在使用代理
//axios.defaults.baseURL = 'http://localhost:8080/'


axios.defaults.headers.common['token'] = '111111111111111111';

//axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

const show = () => {
  ElMessage('hello world infomation')
}

const data = ref([])
const loading = ref(false)


onMounted(getUsers)

// onMounted(() => {
//   getUsers()
// })


async function getUsers() {
  loading.value = true
  const res = await axios.get("/getusers")
  const result = await res.data
  console.log(result)
  loading.value = false
  data.value = result
}

const del = async s => {
  console.log(s.row.id)
  // const res = await axios.delete(`/del/${id}`)
  data.value.splice(s.$index, 1)
  const res = await axios({url: '/dels', method: 'delete', params: {id: s.row.id}})
  const result = await res.data
  console.log(result)
}


const p1 = async () => {
  const res = await axios.patch('/save', {id: 10, name: '李四'})
  const data = await res.data
  console.log(data)
}

const p2 = async () => {
  const res = await axios({
    url: '/save',
    method: 'patch',
    data: {id: 20, name: '王五'}
  })
  const data = await res.data
  console.log(data)
}

const p3 = async () => {
  let formData = new FormData()
  formData.append("id",'88')
  formData.append("name","张三丰")
  const res = await axios({
    url: '/add2',
    method: 'patch',
    data: formData
  })
  const data = await res.data
  console.log(data)
}

const uploads = async () => {
  let formData = new FormData()
  formData.append("id",'88')
  formData.append("name","张三丰")
  for(const file of fs.value.files){
    formData.append('fs',file)
  }
  const res = await axios({
    url: '/uploads',
    method: 'post',
    data: formData
  })
  const data = await res.data
  console.log(data)
}
const fs = ref()
</script>

<template>
  <h1>axios post upfiles</h1>
  <input type="file" multiple ref="fs">
  <el-button type="success" @click="uploads">upload files</el-button>


  <h1>vue element plus fileupfile</h1>

  <hr>
  <el-button type="success" @click="p1">post1</el-button>
  <el-button type="success" @click="p2">post2</el-button>
  <el-button type="success" @click="p3">post3</el-button>
  <hr>
  <el-button type="success" @click="show">提交</el-button>
  <el-button type="primary" :loading="loading" @click="getUsers">axios get</el-button>
  <br>
  <el-table :data="data" stripe border>
    <el-table-column label="编号" prop="id"></el-table-column>
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="出生日期" prop="birth"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="danger" @click="del(scope)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>

</style>
